import { Button, DatePicker, Form, Input } from 'antd';
import { observer } from 'mobx-react-lite';
import React, { useState } from 'react';
// import channel from '../../store/Channel/channel';
import store from '../../store';
import './top.scss'
const { RangePicker } = DatePicker;
const {channel} = store

const formItemLayout = {
  labelCol: {
    xs: {
      span: 24,
    },
    sm: {
      span: 8,
    },
  },
  wrapperCol: {
    xs: {
      span: 24,
    },
    sm: {
      span: 16,
    },
  },
};

// const rangeConfig = {
//   rules: [
//     {
//       type: 'array',
//       required: true,
//       message: 'Please select time!',
//     },
//   ],
  // console.log(e.target.value);
// };
const Top = () => {
  const [snValue, setsnValue] = useState('')
  const [stateTx, stestateTx] = useState('')
  const [telephoneTx, settelephoneTx] = useState('')
  const [time, setTime] = useState('')
  const [geto, setGeto] = useState('')
  //输入框值
  const snText = (e) => {
    // console.log(e.target);
    setsnValue(e.target.value)
  }
  //状态值
  const state = (e) => {
    stestateTx(e.target.value)
  }
  //手机值
  const telephone = (e) => {
    settelephoneTx(e.target.value)
  }
  //提交
  const texteAdd = (snValue, stateTx, telephoneTx, time, geto) => {
    console.log(stateTx);
    console.log(snValue);
    console.log(telephoneTx);
    // channel.texTj(snValue, stateTx, telephoneTx, time, geto)
  }
  const onFinish = (val) => {
    // Should format date value before submit.
    // console.log(val);
    setsnValue(val.snValue)
    stestateTx(val.stateTx)
    settelephoneTx(val.telephoneTx)
    channel.texTj(snValue, stateTx, telephoneTx, time, geto)
  };
  //开机检查
  const onChangetime = (_, string) => {
    setTime(string)
  }
  //绑定时间
  const onChangeto = (_, string) => {
    setGeto(string)
  }
  // console.log(geto);

  return (
    <Form className='liu' name="time_related_controls" {...formItemLayout} onFinish={onFinish}>
      <Form.Item name="snValue" label="SN码">
        <Input placeholder='请输入SN码' value={snValue} onChange={snText}></Input>
      </Form.Item>
      <Form.Item name="stateTx" label="状态">
        <Input placeholder='请输入状态' onChange={state} value={stateTx}></Input>
      </Form.Item>
      <Form.Item name="telephoneTx" label="绑定手机号">
        <Input placeholder='请输入手机号' onChange={telephone} value={telephoneTx}></Input>
      </Form.Item>
      <Form.Item name="time" label="开机时间">
        <RangePicker format="YYYY-MM-DD HH:mm:ss" onChange={onChangetime} />
      </Form.Item>
      <Form.Item name="geto" label="绑定时间" >
        <RangePicker format="YYYY-MM-DD HH:mm:ss" onChange={onChangeto} />
      </Form.Item>

      <Form.Item
        wrapperCol={{
          xs: {
            span: 24,
            offset: 0,
          },
          sm: {
            span: 16,
            offset: 8,
          },
        }}
      >
        <Button type="primary"
           htmlType="submit"
          // onClick={texteAdd}
        >
          提交
        </Button>
      </Form.Item>
    </Form>
  );
};
export default observer(Top);